<script setup lang="ts">
import { type Component, computed } from 'vue';
import PageSkeleton from './page-skeleton.vue';
import HomeSkeleton from './home-skeleton.vue';

interface SkeletonWrapperProps {
  loading: boolean;
  type?: 'page' | 'home' | 'custom';
  skeletonProps?: Record<string, any>;
  customSkeleton?: Component;
}

const props = withDefaults(defineProps<SkeletonWrapperProps>(), {
  loading: false,
  type: 'page',
  skeletonProps: () => ({})
});

const skeletonComponent = computed(() => {
  switch (props.type) {
    case 'home':
      return HomeSkeleton;
    case 'custom':
      return props.customSkeleton || PageSkeleton;
    case 'page':
    default:
      return PageSkeleton;
  }
});
</script>

<template>
  <div class="skeleton-wrapper">
    <!-- 骨架屏 -->
    <component :is="skeletonComponent" v-if="loading" v-bind="skeletonProps" />

    <!-- 实际内容 -->
    <div v-else class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.skeleton-wrapper {
  @apply w-full h-full;
}

.content {
  @apply w-full h-full;
}
</style>
